<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li{
            color:pink;
            height: 50px;
            line-height: 50px;
            border: 1px dashed red;
            border-radius: 10%;
        }
        img{
            width: 500px;
            height: 400px;
        }
        div li:nth-child(5n){
            color: green;
        }
        .box{
            font-size: 30px;
            font-weight: 700;
            color: brown;
           
        }
        .liao{
            color: lightblue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="layout">
        <img src="./image/banner_1.jpg" alt="">
    <div class="liao">我要早退</div>
    <div>QQ聊天小组</div>
    <h3 id="box"></h3>

    <div>九点半我要摸黑早退，啊哈哈</div>

    何梦琪:来呀 造作呀!
    <br>  
    游嫣然:反正有大把时光!
    <br>
    何梦琪:everybody 嗨起来!!!
    <br>
    廖宝锋：好嗨哟。
    <br>
    何梦琪:来呀  一起走呀!
    <br>
    游嫣然:谁要早退!都退了吧
    <br>

    <br>
    
    
    <br>
    游嫣然:垃圾班长!
    <br>

    班长大人:在座的都是垃圾,请给我家一个span标签 给个行内样式 谢谢
    <br>
    游嫣然:样式给你了,请收好!
    <br> 
    班长大人:我说的是加一个行内样式,不是加一个类名 
    <h1>上传!</h1>
    <h1>以后马云见</h1>
    <img src="./image/widget_5.jpg" alt="">
    
    
   

    <div>
        <ul>
            <li>一组组员</li>
            <li>何梦琪</li>
            <li>游嫣然</li>
            <li>廖宝锋</li>
            <li>垃圾班长</li>
        </ul>
    </div>
    <div class="box">班长已被移出本群</div>
<script>
    var lis=document.querySelectorAll('li');
    var yr=document.querySelector('#yanran');
    setTimeout(function(){
        yr.innerText='我是大傻子'
        yr.style.color='red'
    },1000);

    var str='大家好,我是班长大人,我很对不起我的同座位游嫣然同学';

   
    
   var i = 0;
   function typing(){
    var divTyping = document.getElementById('box');
    if (i <= str.length) {
     divTyping.innerHTML = str.slice(0, i++) + '|';
     setTimeout('typing()', 200);
    }
    else{
     divTyping.innerHTML = str;
    }
   }
   typing();
   </script>
</div> 
</body>
</html>